<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-theme.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <title>Java DAO Develop Util/Plugin</title>
    <style>
        body {
            min-width: 1200px;
        }

        .table-not-exist {
            color: red;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid" style="width: 1200px">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="#">JDDUP</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="">首页</a></li>
            </ul>
            <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="表名/实体名">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div id="content-wapper" class="container-fluid" style="width:1200px;">
    <div class="panel panel-default" v-for="datasourceVO in json.content">
        <div class="panel-heading" role="tab" id="datasource-{{ datasourceVO.datasourceName | replace_ }}">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" href="#collapse-{{ datasourceVO.datasourceName | replace_ }}"
                   aria-expanded="true" aria-controls="collapseOne">
                    {{ datasourceVO.datasourceName }}
                </a>
                <!--<button class="btn btn-xs btn-link pull-right">显示概要</button>-->
            </h4>
        </div>
        <div id="collapse-{{ datasourceVO.datasourceName | replace_ }}" class="panel-collapse collapse in"
             role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                <dl>
                    <dt>jdbcUrl</dt>
                    <dd>{{ datasourceVO.jdbcUrl }}</dd>
                </dl>
                <template v-for="packageVO in datasourceVO.packageIndexVOS">
                    <p>
                        <button type="button" class="btn btn-link" role="button" data-toggle="collapse"
                                href="#package-ul-{{ packageVO.packageName | replace_ }}" aria-expanded="true"
                                aria-controls="collapseOne">
                            {{ packageVO.packageName }}
                        </button>
                    </p>
                    <ul class="list-group  collapse in" id="package-ul-{{ packageVO.packageName | replace_ }}">
                        <li class="list-group-item " v-for="tableVO in packageVO.tableIndexVOS">
                            <a role="button" data-toggle="collapse" data-parent="#accordion"
                               href="#table-compare-{{ tableVO.tableName }}"
                               :class="{ 'table-not-exist': !tableVO.tableExist }"
                               aria-expanded="true" aria-controls="table-compare">
                                {{tableVO.beanName }}
                            </a>
                            <span class="label label-success">{{ tableVO.successCount }}</span>
                            <span class="label label-warning">{{ tableVO.warnningCount }}</span>
                            <span class="label label-danger">{{ tableVO.errorCount }}</span>
                            <span class="btn-group pull-right">
                                <button class="btn btn-xs btn-success"
                                        data-href="compareresult.html?tableName={{ tableVO.tableName }}"
                                        v-on:click="defaultOpenLinkVue($event)">全部对比</button>

                                <button class="btn btn-xs btn-success"
                                        v-on:click="openCreateDDL(tableVO)">显示建表语句</button>

                                <!--<button class="btn btn-xs btn-warning ">一键同步</button>-->
                            </span>

                            <div id="table-compare-{{ tableVO.tableName }}" class="panel-collapse collapse "
                                 role="tabpanel"
                                 aria-labelledby="headingOne" style="margin-top: 10px">
                                <div class="container-fluid">
                                    <dl>
                                        <dt>全名</dt>
                                        <dd>{{tableVO.fullBeanName }}</dd>
                                        <dt>表名</dt>
                                        <dd>{{tableVO.tableName }}</dd>
                                    </dl>

                                    <table class="table table-bordered table-responsive"
                                           style="word-break:break-all; word-wrap:break-word;">
                                        <thead>
                                        <tr>
                                            <td>属性</td>
                                            <td>类型</td>
                                            <td>推荐</td>
                                            <td>操作</td>
                                            <td>字段</td>
                                            <td>类型</td>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="columnVO in tableVO.columnDiffIndexVOS">
                                            <td>{{ columnVO.propertyName }}</td>
                                            <td>{{ columnVO.propertyType }}</td>
                                            <td>{{ columnVO.recommendColumnType }}</td>
                                            <td>
                                                <!--<template v-if="columnVO.level == 3">-->
                                                <!--<button class="btn btn-xs btn-danger" data-href="compareresult.html?tableName={{ tableVO.tableName }}&columnName={{ columnVO.columnName }}"-->
                                                <!--v-on:click="defaultOpenLinkVue($event)">对比</button>-->
                                                <!--</template>-->

                                                <template v-if="columnVO.level != 1">
                                                    <button v-bind:class="['btn','btn-xs', columnVO.level == 2 ? 'btn-warning': 'btn-danger']"
                                                            data-href="compareresult.html?tableName={{ tableVO.tableName }}&columnName={{ columnVO.columnName }}"
                                                            v-on:click="defaultOpenLinkVue($event)">对比
                                                    </button>
                                                </template>
                                            </td>
                                            <td>{{ columnVO.columnName }}</td>
                                            <td>{{ columnVO.columnType }}</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </li>
                    </ul>

                </template>
            </div>
        </div>
    </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/varUtils.js"></script>
<script src="//cdn.bootcss.com/vue/1.0.28/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-resource/1.2.0/vue-resource.min.js"></script>
<script>
    Vue.use(VueResource);
    Vue.filter('replace_', function (value) {
        return value.replace(/\./g, "_");
    });

    var vue = new Vue({
        el: '#content-wapper',
        ready: function () {
            searchFormAction(this);
        },
        beforeDestroy: function () {
            console.log("123");
        },
        methods: {
            //刷新表单
            searchForm: function () {
                searchFormAction(this);
            },
            //点击对比
            defaultOpenLinkVue: function (event) {
                var thisEl = this;
                event = event ? event : window.event;
                var obj = event.currentTarget ? event.currentTarget : event.target;

                defaultOpenLinkFunction(event, $(obj));
            },
            // 打开CreateDDL
            openCreateDDL: function (tableVO) {
                var createTableSql = tableVO.createTableSql
                var tableName = tableVO.tableName
                console.log(createTableSql)
                layer.open({
                    type: 1,
                    area: ['1000px', '600px'],
                    fixed: true,
                    shadeClose: true,
                    closeBtn: 1,
                    btn: ['执行建表语句', '关闭'],
                    maxmin: true,
                    content: "<pre>" + createTableSql + "</pre>",
                    yes: function (index) {
                        var url = "executeCreateSQL.json?tableName=" + tableName;
                        vue.$http.get(url).then(function (response) {
                            console.log(response)
                            layer.alert(response.data.msg, function () {
                                window.location.reload()
                            })
                        });
                    }
                })

            }
        },
        data: {
            json: []
        }

    });

    function searchFormAction(vue) {
        vue.$http.get("index.json").then(function (response) {
            vue.$set('json', response.data);
            console.log(response.data);
        });
    }

    function defaultOpenLinkFunction(e, $this) {
        e.preventDefault();
        var href = $this.data('href');
        if (typeof (href) != "undefined") {
            layer.open({
                type: 2,
                area: ['1000px', '600px'],
                fixed: true,
                shadeClose: true,
                closeBtn: 1,
                maxmin: true,
                content: href
            });
        }

    }


</script>
</body>
</html>